<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documentation</title>
</head>
<body>

    <div class="uk-navbar uk-navbar-attached">
        <div class="uk-container uk-container-center">
            <div class="bh-logo">
                <a href="http://www.bahemian.com" target="_blank">
                    <svg width="50px" height="50px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <path fill="#ffffff" opacity="1.00" d=" M 221.27 47.09 C 225.26 44.79 230.92 48.43 229.99 53.09 C 229.73 57.40 224.12 59.80 220.74 57.20 C 217.15 54.97 217.45 48.96 221.27 47.09 Z" />
                            <path fill="#ffffff" opacity="1.00" d=" M 201.42 59.38 C 205.09 58.17 206.69 64.48 202.86 65.12 C 199.20 66.39 197.68 60.05 201.42 59.38 Z" />
                            <path fill="#ffffff" opacity="1.00" d=" M 23.25 72.18 C 23.25 71.37 23.25 70.56 23.25 69.75 C 31.54 69.77 39.83 69.71 48.12 69.77 C 53.02 69.98 58.36 70.45 62.31 73.71 C 66.45 77.19 66.76 83.44 65.19 88.27 C 63.61 92.83 59.34 95.55 55.14 97.41 C 60.11 98.95 64.88 102.44 66.25 107.69 C 67.64 113.50 66.25 120.54 61.22 124.23 C 56.89 127.52 51.22 128.06 45.96 128.25 C 38.39 128.28 30.83 128.23 23.26 128.25 C 23.25 127.47 23.24 126.68 23.23 125.90 C 24.79 124.96 27.27 124.64 27.66 122.54 C 28.28 119.42 28.21 116.20 28.26 113.04 C 28.20 102.32 28.33 91.60 28.20 80.88 C 27.99 78.63 28.27 76.16 27.07 74.14 C 25.91 73.28 24.54 72.80 23.25 72.18 M 36.49 74.33 C 36.52 81.46 36.50 88.60 36.50 95.74 C 41.63 95.55 47.25 96.59 51.92 93.89 C 57.71 90.42 59.00 80.71 53.65 76.31 C 48.59 72.96 42.19 74.11 36.49 74.33 M 36.50 100.01 C 36.50 107.91 36.51 115.80 36.50 123.70 C 41.72 124.01 47.30 124.61 52.22 122.42 C 55.88 120.85 57.52 116.72 57.56 112.96 C 57.87 108.88 56.76 104.01 52.85 101.95 C 47.86 99.24 41.95 100.15 36.50 100.01 Z" />
                            <path fill="#ffffff" opacity="1.00" d=" M 125.98 69.84 C 132.49 69.69 139.01 69.71 145.53 69.81 C 145.29 73.22 140.47 72.85 140.23 76.14 C 139.68 82.57 140.16 89.05 140.00 95.50 C 147.75 95.50 155.50 95.50 163.25 95.50 C 163.07 89.06 163.67 82.58 162.88 76.18 C 162.51 73.05 158.08 73.06 157.59 69.85 C 164.06 69.68 170.55 69.70 177.02 69.84 C 176.65 72.32 174.21 72.98 172.55 74.39 C 171.49 76.42 171.81 78.81 171.72 81.03 C 171.85 94.36 171.60 107.71 171.84 121.04 C 171.63 123.99 174.53 125.57 177.10 125.67 C 181.41 125.90 185.74 125.62 190.06 125.85 C 181.61 121.22 178.32 111.23 178.25 102.12 C 177.71 92.83 179.94 82.65 187.03 76.14 C 193.22 70.41 202.33 69.10 210.36 70.78 C 215.36 71.87 219.97 75.09 222.26 79.73 C 225.27 85.23 225.63 91.63 226.05 97.75 C 213.26 97.75 200.48 97.74 187.69 97.75 C 188.05 104.65 188.18 112.43 193.18 117.81 C 199.12 123.79 209.55 123.56 216.25 119.02 C 216.22 115.78 214.64 111.31 218.39 109.47 C 222.68 106.63 228.46 112.32 225.50 116.59 C 220.25 122.99 212.60 128.15 204.06 128.23 C 188.79 128.29 173.52 128.23 158.25 128.25 C 158.25 127.66 158.24 126.47 158.23 125.88 C 160.11 124.99 162.80 124.42 162.87 121.84 C 163.70 114.52 163.04 107.11 163.25 99.75 C 155.50 99.74 147.75 99.75 140.00 99.75 C 140.16 107.12 139.68 114.52 140.23 121.87 C 140.46 125.19 145.41 124.69 145.50 128.19 C 132.98 128.32 120.47 128.22 107.95 128.25 C 108.22 124.71 108.29 121.17 108.26 117.62 C 103.66 122.45 98.51 127.39 91.76 128.82 C 86.51 129.83 80.42 129.52 76.25 125.78 C 72.26 122.29 71.47 116.40 72.70 111.48 C 74.30 106.20 79.28 102.88 84.20 101.02 C 91.57 98.32 99.47 97.58 107.25 97.16 C 107.21 91.66 107.66 85.82 105.24 80.72 C 102.30 74.70 93.97 73.71 88.43 76.42 C 84.70 78.16 83.15 82.20 81.76 85.78 C 80.46 89.15 75.20 89.52 73.08 86.76 C 70.78 84.36 71.57 80.02 74.58 78.58 C 83.20 73.77 93.03 70.24 103.04 71.08 C 106.82 71.37 110.84 72.73 113.15 75.90 C 115.70 79.36 116.13 83.81 116.25 87.97 C 116.31 97.30 116.16 106.63 116.30 115.96 C 116.46 119.19 116.86 123.33 120.41 124.59 C 124.24 126.93 131.74 125.95 131.39 120.25 C 131.67 107.50 131.40 94.74 131.52 81.98 C 131.45 79.47 131.68 76.77 130.56 74.44 C 128.87 73.01 126.33 72.38 125.98 69.84 M 193.66 77.69 C 189.71 82.11 188.57 88.21 188.09 93.93 C 197.40 94.08 206.71 93.96 216.02 94.00 C 215.45 88.13 215.18 81.60 211.17 76.88 C 206.64 71.86 197.92 72.75 193.66 77.69 M 88.72 103.74 C 85.26 105.27 82.17 108.23 81.48 112.07 C 80.69 115.91 81.89 120.61 85.58 122.54 C 93.74 126.44 104.55 121.48 106.87 112.72 C 107.63 108.76 107.12 104.69 107.24 100.68 C 101.00 101.07 94.54 101.20 88.72 103.74 Z" />
                            <path fill="#ffffff" opacity="1.00" d=" M 23.00 138.00 C 28.21 138.00 33.43 137.99 38.64 138.01 C 43.56 151.62 48.51 165.22 53.47 178.83 C 58.93 165.23 64.27 151.58 69.76 138.00 C 81.53 138.06 93.31 137.90 105.08 138.06 C 109.19 138.16 112.19 142.74 110.68 146.56 C 109.47 150.73 103.76 152.12 100.52 149.42 C 97.53 147.40 99.15 142.51 95.85 140.88 C 91.94 140.62 88.00 140.65 84.09 140.86 C 81.40 140.99 79.46 143.38 79.71 146.03 C 79.24 159.02 79.62 172.03 79.51 185.03 C 79.67 188.10 79.21 192.70 83.08 193.60 C 87.03 194.15 91.35 194.56 95.19 193.23 C 97.74 192.40 97.96 189.44 97.99 187.19 C 98.04 178.28 97.97 169.37 98.01 160.46 C 102.59 160.54 107.17 160.74 111.74 160.93 C 111.75 161.57 111.77 162.85 111.78 163.49 C 109.70 164.29 106.58 164.77 106.46 167.59 C 105.96 174.04 106.38 180.55 106.25 187.03 C 106.11 189.83 107.07 193.24 110.27 193.74 C 114.04 194.01 119.04 195.13 121.71 191.66 C 124.25 188.50 125.40 184.53 126.89 180.82 C 131.53 168.54 136.44 156.36 140.93 144.02 C 140.19 142.98 139.48 141.91 138.61 140.98 C 136.78 140.59 134.90 140.80 133.06 140.81 C 132.21 142.99 130.90 146.12 127.93 145.21 C 124.05 144.85 124.08 138.39 127.99 138.11 C 135.47 137.83 142.96 138.09 150.45 138.00 C 155.44 154.14 160.49 170.25 165.50 186.38 C 166.46 189.34 167.68 193.03 171.12 193.83 C 174.26 194.13 177.86 194.51 180.57 192.54 C 182.42 190.90 181.86 188.14 182.02 185.95 C 181.87 172.27 182.22 158.57 181.85 144.90 C 181.75 141.51 177.97 140.78 175.29 140.60 C 174.23 142.72 173.11 146.07 170.04 145.23 C 166.07 144.93 166.14 138.50 170.00 138.11 C 176.93 137.83 183.89 138.09 190.83 138.00 C 199.41 152.63 208.67 166.87 216.84 181.74 C 216.20 170.84 216.20 159.91 216.27 149.00 C 216.22 146.84 216.38 144.57 215.44 142.57 C 214.24 141.61 212.79 141.05 211.45 140.35 C 211.47 139.76 211.50 138.59 211.52 138.00 C 216.76 138.00 222.00 138.00 227.25 138.00 C 227.25 138.60 227.27 139.79 227.27 140.38 C 225.86 141.26 223.85 141.56 223.00 143.12 C 222.27 145.65 222.30 148.32 222.24 150.94 C 222.26 166.21 222.25 181.48 222.25 196.75 C 220.35 196.75 218.45 196.75 216.56 196.75 C 206.99 180.57 197.06 164.60 187.69 148.30 C 188.26 162.12 188.12 175.96 188.38 189.78 C 188.47 193.21 193.10 193.18 193.87 196.32 C 179.56 196.62 165.21 196.61 150.90 196.33 C 151.45 193.14 155.86 193.74 156.67 190.86 C 157.24 186.15 155.03 181.73 153.96 177.25 C 147.48 177.26 141.00 177.24 134.53 177.26 C 133.18 181.34 131.20 185.41 131.30 189.79 C 131.47 193.39 136.36 193.04 137.12 196.32 C 113.28 196.64 89.42 196.58 65.58 196.35 C 66.30 192.88 71.80 193.17 71.15 189.02 C 71.44 175.09 70.94 161.14 71.91 147.23 C 66.15 161.38 60.47 175.56 54.80 189.74 C 53.00 189.74 51.21 189.75 49.41 189.76 C 44.10 175.36 38.89 160.93 33.48 146.58 C 34.26 159.71 33.94 172.86 33.99 186.01 C 34.08 187.83 34.03 189.73 34.70 191.47 C 36.18 193.32 39.19 193.67 39.55 196.39 C 33.86 196.57 28.15 196.56 22.46 196.39 C 22.77 193.88 25.31 193.36 26.98 192.00 C 28.05 190.22 27.88 188.02 28.00 186.02 C 28.01 173.69 27.98 161.35 28.02 149.02 C 27.96 147.14 27.99 145.19 27.35 143.40 C 26.71 141.55 24.50 141.30 23.00 140.46 C 23.00 139.85 23.00 138.62 23.00 138.00 M 135.87 173.00 C 141.54 173.00 147.21 173.00 152.89 173.00 C 150.32 164.31 147.74 155.62 145.17 146.93 C 142.03 155.61 139.01 164.32 135.87 173.00 Z" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <div class="bh-wrapper">
        <div class="uk-container uk-container-center">
            <div class="uk-grid">
                <div id="docs-nav" class="uk-width-medium-1-4 uk-hidden-small">
                    {{ navigation }}
                </div>
                <div class="uk-width-medium-3-4">
                    <div class="bh-main">
                       <h1 id="balzac-html-template">Balzac HTML Template</h1>
<p><strong>Version:</strong> 1.7.0</p>
<h2 id="general">General</h2>
<p>Thank you for purchasing a Bahemian product. This documentation will give you a quick overview about the project structure and a guide how to easily customize your new Balzac HTML template.</p>
<ul>
<li><a href="http://www.bahemian.com">Bahemian</a> - Learn more about Bahemian</li>
<li><a href="http://facebook.com/bahemian">Facebook Bahemian</a> - Get the latest news on Facebook</li>
<li><a href="http://twitter.com/bahemianhq">@bahemianhq</a> - Get the latest news on Twitter</li>
<li><a href="https://bahemian.ticksy.com/">Support Forum</a> - You need help? Feel free to ask</li>
<li><a href="http://fc07.deviantart.net/fs71/i/2012/038/8/5/how_to_rate_a_file_template_by_cooledition-d4oxno5.jpg">Feedback (How To)</a> - Please give us a feedback and rate our product. Thanks!</li>
</ul>
<h2 id="file-structure">File Structure</h2>
<p>After downloading the template package you will find following folder structure:</p>
<table class="uk-table">
    <thead>
        <tr>
            <th>Folder</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>/</code></td>
            <td>Contains all html files and following folders</td>
        </tr>
        <tr>
            <td><code>/assets</code></td>
            <td>Contains all plugins, libraries and thirdparty components</td>
        </tr>
        <tr>
            <td><code>/css</code></td>
            <td>Contains all compiled css files including the styles and minified versions</td>
        </tr>
        <tr>
            <td><code>/fonts</code></td>
            <td>Contains all the not imported fonts</td>
        </tr>
        <tr>
            <td><code>/images</code></td>
            <td>Contains all images the template is using</td>
        </tr>
        <tr>
            <td><code>/js</code></td>
            <td>Contains the template JavaScript file and additional plugins</td>
        </tr>
        <tr>
            <td><code>/less</code></td>
            <td>Contains all UIkit theme LESS files</td>
        </tr>
    </tbody>
</table>

<pre><code class="lang-html">&lt;!-- Libraries &amp; additional plugins --&gt;
/assets
    /uikit
        ...

/css
    &lt;!-- Default Style --&gt;
    theme.css

    &lt;!-- Dark Style --&gt;
    theme.dark.css

    &lt;!-- Minified CSS files --&gt;
    theme.dark.min.css
    theme.min.css

/fonts
    &lt;!-- FontAwesome webfont --&gt;
    fontawesome-webfont.eot
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    FontAwesome.otf

/images
    ...

/js
    &lt;!-- Custom JavaScript theme file --&gt;
    theme.js

/less
    &lt;!-- UIkit addons overrides --&gt;
    /components

    &lt;!-- Style overrides --&gt;
    /style

    &lt;!-- Custom theme overrides --&gt;
    custom.less

    &lt;!-- Importing default UIkit and all UIkit theme overrides --&gt;
    theme.less
    ...

&lt;!-- HTML files --&gt;
index.html
...
</code></pre>
<h2 id="html-markup">HTML Markup</h2>
<p><span class="uk-badge">Note</span> This template is based on the <a href="http://getuikit.com/">UIkit Frontend Framework</a> and includes all components provided by UIkit. For more information check the <a href="http://getuikit.com/docs/components.html">UIkit Documentation</a>.</p>
<p>Every HTML site follows the same basic markup structure. The following code gives you an example:</p>
<pre><code class="lang-html">&lt;!doctype html&gt;
&lt;html&gt;

    &lt;!-- Meta tags, CSS and scripts references --&gt;
    &lt;head&gt;
        ...
    &lt;/head&gt;

    &lt;body&gt;

        &lt;!-- Header --&gt;
        &lt;div class=&quot;bh-header&quot; data-uk-sticky=&quot;{top:-1}&quot;&gt;

            &lt;!-- Navbar with main navigation and logo --&gt;
            &lt;div class=&quot;bh-navbar&quot;&gt;

                &lt;a href=&quot;#&quot; class=&quot;bh-logo uk-visible-large&quot;&gt;...&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;bh-logo-small uk-hidden-large&quot;&gt;...&lt;/a&gt;
                &lt;nav class=&quot;uk-navbar uk-text-center&quot;&gt;...&lt;/nav&gt;

                &lt;!-- Toolbar Left --&gt;
                &lt;div class=&quot;bh-toolbar-left&quot;&gt;...&lt;/div&gt;

                &lt;!-- Toolbar Right --&gt;
                &lt;div class=&quot;bh-toolbar-right&quot;&gt;...&lt;/div&gt;

            &lt;/div&gt;

            &lt;!-- Search Bar --&gt;
            &lt;div class=&quot;bh-search-bar uk-hidden&quot;&gt;...&lt;/div&gt;

        &lt;/div&gt;

        &lt;!-- Default content wrapper --&gt;
        &lt;div class=&quot;bh-position bh-position-default&quot;&gt;
            &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
               ...
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Footer position --&gt;
        &lt;footer class=&quot;bh-footer&quot;&gt;
            ...
        &lt;/footer&gt;

        &lt;!-- Offcanvas navigation --&gt;
        &lt;div id=&quot;offcanvas&quot; class=&quot;uk-offcanvas&quot;&gt;
            ...
        &lt;/div&gt;

        &lt;!-- Offcanvas Shopping Cart --&gt;
        &lt;div id=&quot;offcanvas-cart&quot; class=&quot;uk-offcanvas bh-offcanvas-light&quot;&gt;
            ...
        &lt;/div&gt;

        &lt;!-- Contains content related JavaScript --&gt;
        &lt;script&gt;
            ...
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre>
<h3 id="content-positions">Content Positions</h3>
<p>The content is wrapped within a <code>div</code> with the class <code>bh-position</code>. This class gives the position the default padding. In addition you need to add the class <code>bh-position-default</code> as long you are not using another background modifier. There a bunch of position modifiers you can use to change the style of a position. You can combine different modifier on one position.</p>
<h4 id="modifier">Modifier</h4>
<table class="uk-table">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.bh-position-primary</code></td>
            <td>Set the position background primary color. Replace <code>bh-position-default</code> if using this modifier</td>
        </tr>
        <tr>
            <td><code>.bh-position-divider</code></td>
            <td>Adds a border top to each position</td>
        </tr>
        <tr>
            <td><code>.bh-position-full</code></td>
            <td>Resets the width of the child uk-container</td>
        </tr>
        <tr>
            <td><code>.bh-position-padding-remove</code></td>
            <td>Removes the padding of the position</td>
        </tr>
    </tbody>
</table>

<pre><code class="lang-html">...

&lt;!-- Default content wrapper with default background color --&gt;
&lt;div class=&quot;bh-position bh-position-default&quot;&gt;
    &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Primary background color --&gt;
&lt;div class=&quot;bh-position bh-position-primary&quot;&gt;
    &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Add a border top to the position --&gt;
&lt;div class=&quot;bh-position bh-position-divider&quot;&gt;
    &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Full position without container --&gt;
&lt;div class=&quot;bh-position bh-position-full&quot;&gt;
    &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Remove padding --&gt;
&lt;div class=&quot;bh-position bh-position-padding-remove&quot;&gt;
    &lt;div class=&quot;uk-container uk-container-center&quot;&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

...
</code></pre>
<h2 id="customization">Customization</h2>
<p>As already mentioned at the beginning, Balzac is completely built with the UIkit Frontend Framework using LESS. If you are not familiar with it just take a look at its detailed documentations.</p>
<ul>
<li><a href="http://getuikit.com/docs/components.html">UIkit Documentation Framework</a></li>
<li><a href="http://www.lesscss.org">LESS</a></li>
</ul>
<h3 id="logo">Logo</h3>
<p>Balzac is using a font as a default logo. If you like the font and just want to change the name take a look at the first example below. Of course it is also possible to use an image instead. In this case take a closer look at the second example.</p>
<p>It is also possible to add a different logo for smaller screen sizes using the class <code>bh-logo-small</code>.</p>
<pre><code class="lang-html">...

&lt;!-- Default logo as uk-navbar-brand --&gt;
&lt;a class=&quot;bh-logo uk-visible-large&quot; href=&quot;index.html&quot;&gt;
    &lt;div class=&quot;uk-navbar-brand&quot;&gt;
        &lt;span class=&quot;uk-text-primary&quot;&gt;Bal&lt;/span&gt;zac
    &lt;/div&gt;
&lt;/a&gt;

&lt;!-- Default logo-small as uk-navbar-brand --&gt;
&lt;a class=&quot;bh-logo-small uk-hidden-large&quot; href=&quot;index.html&quot;&gt;
    &lt;div class=&quot;uk-navbar-brand&quot;&gt;
        &lt;span class=&quot;uk-text-primary&quot;&gt;Bal&lt;/span&gt;zac
    &lt;/div&gt;
&lt;/a&gt;

&lt;!-- Images as logo --&gt;
&lt;a class=&quot;bh-logo&quot; href=&quot;index.html&quot;&gt;
    &lt;img class=&quot;uk-responsive-height&quot; src=&quot;...&quot; width=&quot;&quot; height=&quot;&quot;&gt;
&lt;/a&gt;

...
</code></pre>
<h3 id="main-menu">Main menu</h3>
<p>To change the navigation you need to change it within the main menu and within the mobile offcanvas navigation. Please have a look at the documentation of the <a href="http://getuikit.com/docs/navbar.html">UIkit Navbar</a> and <a href="http://getuikit.com/docs/offcanvas.html">UIkit Offcanvas</a> to get an overview about these components.</p>
<pre><code class="lang-html">&lt;!-- Main menu --&gt;
&lt;div class=&quot;bh-navbar&quot;&gt;
    ...
    &lt;nav class=&quot;uk-navbar&quot;&gt;
        &lt;ul class=&quot;uk-navbar-nav uk-hidden-small&quot;&gt;
            &lt;li class=&quot;uk-parent&quot; data-uk-dropdown&gt;
                &lt;a href=&quot;#&quot;&gt;Parent Item&lt;/a&gt;
                &lt;div class=&quot;uk-dropdown uk-dropdown-navbar&quot;&gt;
                    &lt;ul class=&quot;uk-nav uk-nav-navbar&quot;&gt;
                        &lt;li&gt;
                            &lt;a href=&quot;#&quot;&gt;Subitem&lt;/a&gt;
                        &lt;/li&gt;
                        ...
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/nav&gt;
    ...
&lt;/div&gt;

&lt;!-- Offcanvas menu --&gt;
&lt;div id=&quot;offcanvas&quot; class=&quot;uk-offcanvas&quot;&gt;
    &lt;div class=&quot;uk-offcanvas-bar uk-offcanvas-bar-flip&quot;&gt;
        &lt;ul class=&quot;uk-nav uk-nav-offcanvas&quot;&gt;
            &lt;li class=&quot;uk-parent&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Parent Item&lt;/a&gt;
                &lt;ul class=&quot;uk-nav-sub&quot;&gt;
                    &lt;li&gt;
                        &lt;a href=&quot;#&quot;&gt;Subitem&lt;/a&gt;
                    &lt;/li&gt;
                    ...
                &lt;/ul&gt;
            &lt;/li&gt;
            ...
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
...
</code></pre>
<h2 id="javascript">JavaScript</h2>
<p>Balzac is using different UIkit addons to enhance your website.</p>
<p><span class="uk-badge">Note</span> All JavaScript files are included within the <code>footer.html</code>.</p>
<h3 id="slideshow">Slideshow</h3>
<p>Balzac comes with the <a href="http://www.getuikit.com/docs/slideshow.html">UIkit Slideshow addon</a>. Here is an example how you can set it up. This slideshow is also using the <a href="http://www.getuikit.com/docs/slidenav.html">UIkit Slidenav addon</a> and the <a href="http://www.getuikit.com/docs/overlay.html">UIkit Overlay component</a>. If needed you can also include the <a href="http://www.getuikit.com/docs/dotnav.html">UIkit Dotnav addon</a> shown in the example below.</p>
<p>The default slideshow markup is the same like <a href="http://www.getuikit.com/docs/slideshow.html">UIkit Slideshow addon</a>.</p>
<p>The markup for the slideshow positioned directly after the navbar looks like this:</p>
<pre><code class="lang-html">&lt;div class=&quot;bh-position-slideshow&quot; data-uk-slideshow=&quot;{animation: &#39;fade&#39;}&quot;&gt;
    &lt;ul class=&quot;uk-slideshow bh-slideshow&quot;&gt;

        &lt;!-- First slide --&gt;
        &lt;li&gt;

            &lt;!-- Slide image --&gt;
            &lt;img src=&quot;&quot; width=&quot;&quot; height=&quot;&quot; alt=&quot;&quot;&gt;

            &lt;!-- Slideshow Caption --&gt;
            &lt;div class=&quot;uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center&quot;&gt;
                &lt;!-- Caption content --&gt;
            &lt;/div&gt;

            &lt;!-- Slidenav navigation previous --&gt;
            &lt;a data-uk-slideshow-item=&quot;previous&quot; href=&quot;#&quot; class=&quot;uk-slidenav uk-slidenav-previous uk-hidden-small&quot;&gt;

                &lt;!-- Slidenav previous preview --&gt;
                &lt;div class=&quot;bh-slideshow-preview&quot;&gt;
                    &lt;img class=&quot;bh-slideshow-preview-image&quot; src=&quot;&quot; width=&quot;120&quot; height=&quot;120&quot;&gt;
                    &lt;p&gt;...&lt;/p&gt;
                &lt;/div&gt;

            &lt;/a&gt;

            &lt;!-- Slidenav navigation next --&gt;
            &lt;a data-uk-slideshow-item=&quot;next&quot; href=&quot;#&quot; class=&quot;uk-slidenav uk-slidenav-next uk-hidden-small&quot;&gt;

                &lt;!-- Slidenav next preview --&gt;
                &lt;div class=&quot;bh-slideshow-preview&quot;&gt;
                    &lt;img class=&quot;bh-slideshow-preview-image&quot; src=&quot;&quot; width=&quot;120&quot; height=&quot;120&quot;&gt;
                    &lt;p&gt;...&lt;/p&gt;
                &lt;/div&gt;

            &lt;/a&gt;

        &lt;/li&gt;

        &lt;li&gt;...&lt;/li&gt;
        ...

    &lt;/ul&gt;

    &lt;!-- Optional: Dotnav navigation --&gt;
    &lt;ul class=&quot;uk-dotnav&quot;&gt;
        &lt;li data-uk-slideshow-item=&quot;0&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-uk-slideshow-item=&quot;1&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-uk-slideshow-item=&quot;2&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
        ...
    &lt;/ul&gt;

&lt;/div&gt;
</code></pre>
<h4 id="javascript-options">JavaScript options</h4>
<p>Check out the documentation of <a href="http://www.getuikit.com/docs/slideshow.html">UIkit Slideshow</a>.</p>
<h3 id="dynamic-grid">Dynamic Grid</h3>
<p>We also included the <a href="http://www.getuikit.com/docs/grid-js.html">UIkit Dynamic Grid</a> for you. In this example the grid is using the <a href="http://www.getuikit.com/docs/subnav.html">UIkit Subnav</a> as filter menu, the <a href="http://www.getuikit.com/docs/slideshow.html">UIkit Lightbox</a> to display the images and <a href="http://www.getuikit.com/docs/overlay.html">UIkit Overlay</a> to add content on the image, but otherwise you can use another navigation if needed or use it without the Lightbox or Overlay component.</p>
<p>This is how the markup looks like:</p>
<pre><code class="lang-html">&lt;ul id=&quot;my-id&quot; class=&quot;uk-subnav uk-subnav-line&quot; data-uk-switcher&gt;
    &lt;li&gt;&lt;a data-uk-filter=&quot;filter01&quot;&gt;Filter 01&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-uk-filter=&quot;filter02&quot;&gt;Filter 02&lt;/a&gt;&lt;/li&gt;
    ...
&lt;/ul&gt;

&lt;!-- Use the UIkit grid to make your layout --&gt;
&lt;div class=&quot;uk-grid-width-small-1-2 uk-grid-width-medium-1-3&quot; data-uk-grid=&quot;{controls: &#39;#my-id&#39;, gutter: 20}&quot;&gt;

    &lt;div data-uk-filter=&quot;filter01&quot;&gt;
        &lt;figure class=&quot;uk-overlay uk-overlay-hover&quot;&gt;
            &lt;img class=&quot;uk-overlay-spin&quot; src=&quot;portfolio-image01.jpg&quot; width=&quot;&quot; height=&quot;&quot; alt=&quot;&quot;&gt;
            &lt;figcaption class=&quot;uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade&quot;&gt;&lt;/figcaption&gt;
            &lt;a class=&quot;uk-position-cover&quot; href=&quot;lightbox-image01.jpg.jpg&quot; data-uk-lightbox&gt;&lt;/a&gt;
        &lt;/figure&gt;
    &lt;/div&gt;

    &lt;div data-uk-filter=&quot;filter02&quot;&gt;
        ...
    &lt;/div&gt;

    ...

&lt;/div&gt;
</code></pre>
<h4 id="javascript-options">JavaScript options</h4>
<p>Check out the documentation of <a href="http://www.getuikit.com/docs/grid-js.html">UIkit Dynamic Grid</a>.</p>
<h3 id="slider">Slider</h3>
<p>The prodcut slider on the frontpage.html and the single product page are using the <a href="http://www.getuikit.com/docs/slider.html">UIkit Slider</a> component.</p>
<p>Take a look at the default markup:</p>
<pre><code class="lang-html">&lt;div class=&quot;uk-slidenav-position&quot; data-uk-slider&gt;

    &lt;div class=&quot;uk-slider-container&quot;&gt;
        &lt;ul class=&quot;uk-slider uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3&quot;&gt;
            &lt;li&gt;
                &lt;!-- Slide Content 01 --&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;!-- Slide Content 02 --&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

    &lt;a href=&quot;#&quot; class=&quot;bh-slider-prev&quot; data-uk-slider-item=&quot;previous&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;#&quot; class=&quot;bh-slider-next&quot; data-uk-slider-item=&quot;next&quot;&gt;&lt;/a&gt;

&lt;/div&gt;
</code></pre>
<h4 id="javascript-options">JavaScript options</h4>
<p>Check out the documentation of <a href="http://www.getuikit.com/docs/slider.html">UIkit Slider</a>.</p>
<h2 id="credits">Credits</h2>
<p>We used the following sources for images, icons and other files.</p>
<h3 id="css-javascript">CSS, JavaScript</h3>
<ul>
<li><a href="http://www.getuikit.com">UIkit</a></li>
<li><a href="http://www.jquery.com">jQuery</a></li>
<li><a href="http://www.lesscss.org">LESS</a></li>
</ul>
<h3 id="images-videos">Images, Videos</h3>
<p><span class="uk-badge">Note</span> All images you can see on the preview site are replaced by placeholder images within the download package.</p>
<ul>
<li><a href="http://www.unsplash.com">Unsplash</a></li>
<li><a href="http://www.littlevisuals.co">Little Visuals</a></li>
<li><a href="http://www.mazwai.com">Mazwai</a></li>
<li><a href="http://www.imcreator.com/free">ImCreator</a> - Images of people</li>
<li><a href="http://www.shutterstock.com">Shutterstock</a> - Shop images</li>
</ul>
<h2 id="changelog">Changelog</h2>
<p>You can find all made changes until now in following file <code>balzac/CHANGELOG.md</code></p>

                    </div>
                </div>
            </div>
        </div>
    </div>

<style>

    /* ========================================================================
      Component: Base
    ========================================================================== */

    /*
    * 1. Normalizes default `font-family` and sets `font-size` here to support `rem` units
    * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
    * 3. Style
    */

    html {
        /* 1 */
        font: normal 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
        /* 2 */
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        /* 3 */
        background: #fffff;
        color: #444444;
    }

    /*
    * Removes default margin.
    */

    body {
        margin: 0;
    }

    a {
        background: transparent;
    }

    /*
    * Improves readability when focused and also mouse hovered in all browsers.
    */

    a:active,
    a:hover {
        outline: 0;
    }

    /*
    * Style
    */

    a {
        color: #0077dd;
        text-decoration: none;
        cursor: pointer;
    }

    a:hover {
        color: #005599;
        text-decoration: underline;
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    /*
    * Addresses style set to `bolder` in Firefox
    */

    b,
    strong {
        font-weight: bold;
    }

    /*
    * 1. Address odd `em`-unit font size rendering in all browsers.
    * 2. Consolas has a better baseline in running text compared to `Courier`
    */

    :not(pre) > code,
    :not(pre) > kbd,
    :not(pre) > samp {
        /* 1 */
        font-size: 12px;
        /* 2 */
        font-family: Consolas, monospace, serif;
        /* 3 */
        color: #dd0055;
        white-space: nowrap;
        padding: 0 4px;
        border: 1px solid #dddddd;
        border-radius: 3px;
        background: #fafafa;
    }
    /*
    * Emphasize
    */
    em {
        color: #dd0055;
    }
    /*
    * Insert
    */
    ins {
        background: #ffffaa;
        color: #444444;
        text-decoration: none;
    }
    /*
    * Mark
    * Note: Addresses styling not present in IE 8/9.
    */
    mark {
        background: #ffffaa;
        color: #444444;
    }

    /*
    * Quote
    */

    q {
        font-style: italic;
    }

    /*
    * Addresses inconsistent and variable font size in all browsers.
    */

    small {
        font-size: 80%;
    }

    /*
    * Prevents `sub` and `sup` affecting `line-height` in all browsers.
    */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    /*
     * 1. Responsiveness: Sets a maximum width relative to the parent and auto scales the height
     * 2. Corrects `max-width` behavior if padding and border are used
     * 3. Remove border when inside `a` element in IE 8/9/10.
     * 4. Remove the gap between images and the bottom of their containers
     */

    img {
        /* 1 */
        max-width: 100%;
        height: auto;
        /* 2 */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* 3 */
        border: 0;
        /* 4 */
        vertical-align: middle;
    }

    /*
    * Correct overflow not hidden in IE 9/10/11.
    */

    svg:not(:root) {
        overflow: hidden;
    }

    /*
    * Reset margin
    */

    blockquote,
    figure {
        margin: 0;
    }

    /*
    * Margins
    */

    p,
    ul,
    ol,
    dl,
    blockquote,
    pre,
    address,
    fieldset,
    figure {
        margin: 0 0 15px 0;
    }

    * + p,
    * + ul,
    * + ol,
    * + dl,
    * + blockquote,
    * + pre,
    * + address,
    * + fieldset,
    * + figure {
        margin-top: 15px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        color: #444444;
        text-transform: none;
    }

    /*
     * Margins
     */

    * + h1,
    * + h2,
    * + h3,
    * + h4,
    * + h5,
    * + h6 {
        margin-top: 25px;
    }

    /*
     * Sizes
     */

    h1 {
        font-size: 36px;
        line-height: 42px;
    }

    h2 {
        font-size: 24px;
        line-height: 30px;
    }

    h3 {
        font-size: 18px;
        line-height: 24px;
    }

    h4 {
        font-size: 16px;
        line-height: 22px;
    }

    h5 {
        font-size: 14px;
        line-height: 20px;
    }

    h6 {
        font-size: 12px;
        line-height: 18px;
    }

    ul,
    ol {
        padding-left: 30px;
    }

    /*
    * Reset margin for nested lists
    */

    ul > li > ul,
    ul > li > ol,
    ol > li > ol,
    ol > li > ul {
        margin: 0;
    }

    dt {
        font-weight: bold;
    }

    dd {
        margin-left: 0;
    }

    /*
    * 1. Address differences between Firefox and other browsers.
    * 2. Style
    */

    hr {
        /* 1 */
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
        /* 2 */
        margin: 15px 0;
        border: 0;
        border-top: 1px solid #dddddd;
    }

    address {
        font-style: normal;
    }

    blockquote {
        padding-left: 15px;
        border-left: 5px solid #dddddd;
        font-size: 16px;
        line-height: 22px;
        font-style: italic;
    }

    /*
     * 1. Contain overflow in all browsers.
     */

    pre {
        padding: 10px;
        background: #fafafa;
        font: 12px / 18px Consolas, monospace, serif;
        color: #444444;
        -moz-tab-size: 4;
        tab-size: 4;
        /* 1 */
        overflow: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    ::-moz-selection {
        background: #3399ff;
        color: #ffffff;
        text-shadow: none;
    }

    ::selection {
        background: #3399ff;
        color: #ffffff;
        text-shadow: none;
    }

    /*
    * Corrects `block` display not defined in IE 8/9.
    */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    nav,
    section,
    summary {
        display: block;
    }

    /*
    * Addresses inconsistent vertical alignment of `progress` in Chrome, Firefox and Opera.
    */

    progress {
    vertical-align: baseline;
    }

    /*
    * Prevent displaying `audio` without controls in Chrome, Safari and Opera
    */

    audio:not([controls]) {
    display: none;
    }

    /*
    * Address `[hidden]` styling not present in IE 8/9.
    * Hide the `template` element in IE and Safari
    */

    [hidden],
    template {
    display: none;
    }

    iframe {
    border: 0;
    }

    @media screen and (max-width: 400px) {

    @-ms-viewport {
      width: device-width;
    }

    }


    /* ========================================================================
    Component: Grid
    ========================================================================== */
    /*
    * 1. Makes grid more robust so that it can be used with other block elements like lists
    */

    .uk-grid {
      display: -ms-flexbox;
      display: -webkit-flex;
      display:         flex;
      /* 1 */
      margin: 0;
      padding: 0;
      list-style: none;

          -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
    }

    /*
    * DEPRECATED
    * Micro clearfix
    * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit
    */

    .uk-grid:before,
    .uk-grid:after {
      display: block;
      overflow: hidden;
      content: '';
    }

    .uk-grid:after {
      clear: both;
    }

    /*
    * Grid cell
    * 1. Space is allocated solely based on content dimensions
    * 2. Makes grid more robust so that it can be used with other block elements
    * 3. DEPRECATED Using `float` to support IE9
    */

    .uk-grid > * {
      /* 3 */
      float: left;
      /* 2 */
      margin: 0;
      /* 1 */

          -ms-flex: none;
      -webkit-flex: none;
              flex: none;
    }

    /*
    * Remove margin from the last-child
    */

    .uk-grid > * > :last-child {
        margin-bottom: 0;
    }

    /* Grid gutter
    ========================================================================== */
    /*
    * Default gutter
    */

    /* Horizontal */
    .uk-grid {
        margin-left: -25px;
    }

    .uk-grid > * {
        padding-left: 25px;
    }

    /* Vertical */
    .uk-grid + .uk-grid,
    .uk-grid-margin,
    .uk-grid > * > .uk-panel + .uk-panel {
        margin-top: 25px;
    }

    /* Large screen and bigger */
    @media (min-width: 1220px) {

        /* Horizontal */
        .uk-grid {
            margin-left: -35px;
        }

        .uk-grid > * {
            padding-left: 35px;
        }

        /* Vertical */
        .uk-grid + .uk-grid,
        .uk-grid-margin,
        .uk-grid > * > .uk-panel + .uk-panel {
            margin-top: 35px;
        }

    }

    /* Match panels in grids
    ========================================================================== */

    .uk-grid-match > * {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    /*
     * 1. Behave like a block element
     */

    .uk-grid-match > * > * {
        -ms-flex: none;
        -webkit-flex: none;
        flex: none;
        /* 1 */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }

    /* Sub-objects: `uk-width-*`
    ========================================================================== */

    [class*='uk-width'] {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }

    /*
     * Widths
     */

    /* Halves */
    .uk-width-1-2,
    .uk-width-2-4,
    .uk-width-3-6,
    .uk-width-5-10 {
        width: 50%;
    }

    /* Thirds */
    .uk-width-1-3,
    .uk-width-2-6 {
        width: 33.333%;
    }

    .uk-width-2-3,
    .uk-width-4-6 {
        width: 66.666%;
    }

    /* Quarters */
    .uk-width-1-4 {
        width: 25%;
    }

    .uk-width-3-4 {
        width: 75%;
    }

    /* Phone landscape and bigger */
    @media (min-width: 480px) {

        /* Halves */
        .uk-width-small-1-2,
        .uk-width-small-2-4,
        .uk-width-small-3-6,
        .uk-width-small-5-10 {
            width: 50%;
        }

        /* Thirds */
        .uk-width-small-1-3,
        .uk-width-small-2-6 {
            width: 33.333%;
        }

        .uk-width-small-2-3,
        .uk-width-small-4-6 {
            width: 66.666%;
        }

        /* Quarters */
        .uk-width-small-1-4 {
            width: 25%;
        }

        .uk-width-small-3-4 {
            width: 75%;
        }

    }

    /* Tablet and bigger */
    @media (min-width: 768px) {

        /* Halves */
        .uk-width-medium-1-2,
        .uk-width-medium-2-4,
        .uk-width-medium-3-6,
        .uk-width-medium-5-10 {
            width: 50%;
        }

        /* Thirds */
        .uk-width-medium-1-3,
        .uk-width-medium-2-6 {
            width: 33.333%;
        }

        .uk-width-medium-2-3,
        .uk-width-medium-4-6 {
            width: 66.666%;
        }

        /* Quarters */
        .uk-width-medium-1-4 {
            width: 25%;
        }

        .uk-width-medium-3-4 {
            width: 75%;
        }

    }
    /* Desktop and bigger */
    @media (min-width: 960px) {

        /* Whole */
        .uk-width-large-1-1 {
            width: 100%;
        }

        /* Halves */
        .uk-width-large-1-2,
        .uk-width-large-2-4,
        .uk-width-large-3-6,
        .uk-width-large-5-10 {
            width: 50%;
        }

        /* Thirds */
        .uk-width-large-1-3,
        .uk-width-large-2-6 {
            width: 33.333%;
        }

        .uk-width-large-2-3,
        .uk-width-large-4-6 {
            width: 66.666%;
        }

        /* Quarters */
        .uk-width-large-1-4 {
            width: 25%;
        }

        .uk-width-large-3-4 {
             width: 75%;
        }

    }

    /* ========================================================================
    Component: Thumbnail
    ========================================================================== */

    /*
     * 1. Container width fits its content
     * 2. Responsive behavior
     * 3. Corrects `max-width` behavior sed
     * 4. Required for `figure` element
     * 5. Style
     */

    .uk-thumbnail {
        /* 1 */
        display: inline-block;
        /* 2 */
        max-width: 100%;
        /* 3 */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* 3 */
        margin: 0;
        /* 4 */
        padding: 4px;
        border: 1px solid #dddddd;
        background: #ffffff;
    }

    /*
     * Hover state for `a` elements
     * 1. Apply hover style also to focus state
     * 2. Needed for caption
     * 3. Remove default focus style
     */

    a.uk-thumbnail:hover,
    a.uk-thumbnail:focus {
        border-color: #aaaaaa;
        background-color: #ffffff;
        /* 2 */
        text-decoration: none;
        /* 3 */
        outline: none;
    }

    /* Caption
    ========================================================================== */

    .uk-thumbnail-caption {
        padding-top: 4px;
        text-align: center;
        color: #444444;
    }


    /* ========================================================================
     Component: Table
    ========================================================================== */

    /*
    * 1. Remove most spacing between table cells.
    * 2. Block element behavior
    * 3. Style
    */

    .uk-table {
        /* 1 */
        border-collapse: collapse;
        border-spacing: 0;
        /* 2 */
        width: 100%;
        /* 3 */
        margin-bottom: 15px;
    }

    /*
    * Add margin if adjacent element
    */

    * + .uk-table {
        margin-top: 15px;
    }

    .uk-table th,
    .uk-table td {
        padding: 8px 8px;
        border-bottom: 1px solid #dddddd;
    }

    /*
    * Set alignment
    */

    .uk-table th {
        text-align: left;
    }

    .uk-table td {
        vertical-align: top;
    }

    .uk-table thead th {
        vertical-align: bottom;
    }

    /*
    * Caption and footer
    */

    .uk-table caption,
    .uk-table tfoot {
        font-size: 12px;
        font-style: italic;
    }

    .uk-table caption {
        text-align: left;
        color: #999999;
    }

    /* Sub-modifier: `uk-table-middle`
    ========================================================================== */

    .uk-table-middle,
    .uk-table-middle td {
        vertical-align: middle !important;
    }

    /* Modifier: `uk-table-striped`
    ========================================================================== */

    .uk-table-striped tbody tr:nth-of-type(odd) {
        background: #fafafa;
    }

    /* Modifier: `uk-table-hover`
    ========================================================================== */

    .uk-table-hover tbody tr:hover {
        background: #f0f0f0;
    }


    /* ========================================================================
     Component: Nav
    ========================================================================== */

    .uk-nav,
    .uk-nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /*
     * Items
     */

    .uk-nav li > a {
        display: block;
        text-decoration: none;
    }

    .uk-nav > li > a {
        padding: 5px 15px;
    }

    /*
     * Nested items
     */

    .uk-nav ul {
        padding-left: 15px;
    }

    .uk-nav ul a {
        padding: 2px 0;
    }

    /*
     * Item subtitle
     */

    .uk-nav li > a > div {
        font-size: 12px;
        line-height: 18px;
    }

    /* Sub-object: `uk-nav-header`
    ========================================================================== */

    .uk-nav-header {
        padding: 5px 15px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12px;
    }

    .uk-nav-header:not(:first-child) {
        margin-top: 15px;
    }

    /* Sub-object: `uk-nav-divider`
    ========================================================================== */

    .uk-nav-divider {
        margin: 9px 15px;
    }

    /* Sub-object: `uk-nav-sub`
    ========================================================================== */

    /*
     * `ul` needed for higher specificity to override padding
     */

    ul.uk-nav-sub {
        padding: 5px 0 5px 15px;
    }

    /* Modifier: `uk-nav-parent-icon`
    ========================================================================== */

    .uk-nav-parent-icon > .uk-parent > a:after {
        content: "\f104";
        width: 20px;
        margin-right: -10px;
        float: right;
        font-family: FontAwesome;
        text-align: center;
    }

    .uk-nav-parent-icon > .uk-parent.uk-open > a:after {
        content: "\f107";
    }

    /* Modifier `uk-nav-side`
    ========================================================================== */

    /*
    * Items
    */

    .uk-nav-side > li > a {
        color: #444444;
    }

    /*
    * Hover
    * 1. Apply hover style also to focus state
    * 2. Remove default focus style
    */

    .uk-nav-side > li > a:hover,
    .uk-nav-side > li > a:focus {
        background: rgba(0, 0, 0, 0.03);
        color: #444444;
        /* 2 */
        outline: none;
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.06);
        text-shadow: 0 -1px 0 #ffffff;
    }

    /* Active */
    .uk-nav-side > li.uk-active > a {
        background: #00a8e6;
        color: #ffffff;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    }

    /*
     * Sub-object: `uk-nav-header`
     */

    .uk-nav-side .uk-nav-header {
        color: #444444;
    }

    /*
     * Sub-object: `uk-nav-divider`
     */

    .uk-nav-side .uk-nav-divider {
        border-top: 1px solid #dddddd;
        box-shadow: 0 1px 0 #ffffff;
    }

    /*
     * Nested items
     */

    .uk-nav-side ul a {
        color: #0077dd;
    }

    .uk-nav-side ul a:hover {
        color: #005599;
    }


    /* ========================================================================
     Component: Utility
    ========================================================================== */

    /* Phone landscape and smaller*/
    @media (max-width: 767px) {

        .uk-hidden-small {
            display: none !important;
        }

    }

    /* Container
     ========================================================================== */
    .uk-container {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        max-width: 980px;
        padding: 0 25px;
    }

    /* Large screen and bigger */
    @media (min-width: 1220px) {

        .uk-container {
            max-width: 1200px;
            padding: 0 35px;
        }

    }

    /*
     * Micro clearfix
     */
    .uk-container:before,
    .uk-container:after {
        content: "";
        display: table;
    }

    .uk-container:after {
        clear: both;
    }

    /*
     * Center container
     */

    .uk-container-center {
        margin-left: auto;
         margin-right: auto;
    }


    /* Alignment modifiers
    ========================================================================== */

    .uk-text-center {
        text-align: center !important;
    }

    /* ========================================================================
       Component: Badge
     ========================================================================== */

    .uk-badge {
        display: inline-block;
        padding: 0 5px;
        background: #00a8e6;
        font-size: 10px;
        font-weight: bold;
        line-height: 14px;
        color: #ffffff;
        text-align: center;
        vertical-align: middle;
        text-transform: none;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 2px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    }


    /* ========================================================================
     Custom
    ========================================================================== */

    .uk-navbar {
        background: #222;
    }

    .bh-wrapper {
        margin: 50px 0;
    }

    .bh-main {
        border-left: 1px solid #F0F0F0;
        padding-left: 25px;
    }

    @media (min-width: 1220px) {

        .bh-main {
            padding-left: 35px;
        }

    }

    @media (max-width: 767px) {

        .bh-main {
            border-left: none;
            padding-left: 0;
        }

    }

    .bh-logo {
        text-align: center;
    }

    h2 {
        margin-top: 50px;
        border-bottom: 3px solid #F0F0F0;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    h4 {
        border-left: 3px solid #F0F0F0;
        padding-left: 10px;
    }

    h3 {
        margin-top: 50px;
    }

</style>
<script>

    // highlight js
    var hljs=new function(){function j(v){return v.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(v){return v.nodeName.toLowerCase()}function h(w,x){var v=w&&w.exec(x);return v&&v.index==0}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^lang(uage)?-/,"")});return v.filter(function(x){return i(x)||/no(-?)highlight/.test(x)})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);if(!t(A).match(/br|hr|img|input/)){v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset<y[0].offset)?w:y}return y[0].event=="start"?w:y}function A(H){function G(I){return" "+I.nodeName+'="'+j(I.value)+'"'}F+="<"+t(H)+Array.prototype.map.call(H.attributes,G).join("")+">"}function E(G){F+="</"+t(G)+">"}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=j(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+j(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};var E=function(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})};if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b="\\b("+D.bK.split(" ").join("|")+")\\b"}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?("+F.b+")\\.?":F.b}).concat([D.tE,D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}}}x(y)}function c(T,L,J,R){function v(V,W){for(var U=0;U<W.c.length;U++){if(h(W.c[U].bR,V)){return W.c[U]}}}function z(V,U){if(h(V.eR,U)){return V}if(V.eW){return z(V.parent,U)}}function A(U,V){return !J&&h(V.iR,U)}function E(W,U){var V=M.cI?U[0].toLowerCase():U[0];return W.k.hasOwnProperty(V)&&W.k[V]}function w(aa,Y,X,W){var U=W?"":b.classPrefix,V='<span class="'+U,Z=X?"":"</span>";V+=aa+'">';return V+Y+Z}function N(){if(!I.k){return j(C)}var U="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(C);while(V){U+=j(C.substr(X,V.index-X));var W=E(I,V);if(W){H+=W[1];U+=w(W[0],j(V[0]))}else{U+=j(V[0])}X=I.lR.lastIndex;V=I.lR.exec(C)}return U+j(C.substr(X))}function F(){if(I.sL&&!f[I.sL]){return j(C)}var U=I.sL?c(I.sL,C,true,S):e(C);if(I.r>0){H+=U.r}if(I.subLanguageMode=="continuous"){S=U.top}return w(U.language,U.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(W,V){var U=W.cN?w(W.cN,"",true):"";if(W.rB){D+=U;C=""}else{if(W.eB){D+=j(V)+U;C=""}else{D+=U;C=V}}I=Object.create(W,{parent:{value:I}})}function G(U,Y){C+=U;if(Y===undefined){D+=Q();return 0}var W=v(Y,I);if(W){D+=Q();P(W,Y);return W.rB?0:Y.length}var X=z(I,Y);if(X){var V=I;if(!(V.rE||V.eE)){C+=Y}D+=Q();do{if(I.cN){D+="</span>"}H+=I.r;I=I.parent}while(I!=X.parent);if(V.eE){D+=j(Y)}C="";if(X.starts){P(X.starts,"")}return V.rE?0:Y.length}if(A(Y,I)){throw new Error('Illegal lexeme "'+Y+'" for mode "'+(I.cN||"<unnamed>")+'"')}C+=Y;return Y.length||1}var M=i(T);if(!M){throw new Error('Unknown language: "'+T+'"')}m(M);var I=R||M;var S;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,"",true)+D}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="</span>"}}return{r:H,value:D,language:T,top:I}}catch(O){if(O.message.indexOf("Illegal")!=-1){return{r:0,value:j(L)}}else{throw O}}}function e(y,x){x=x||b.languages||Object.keys(f);var v={r:0,value:j(y)};var w=v;x.forEach(function(z){if(!i(z)){return}var A=c(z,y,false);A.language=z;if(A.r>w.r){w=A}if(A.r>v.r){w=v;v=A}});if(w.language){v.second_best=w}return v}function g(v){if(b.tabReplace){v=v.replace(/^((<[^>]+>|\t)+)/gm,function(w,z,y,x){return z.replace(/\t/g,b.tabReplace)})}if(b.useBR){v=v.replace(/\n/g,"<br>")}return v}function p(A){var B=r(A);if(/no(-?)highlight/.test(B)){return}var y;if(b.useBR){y=document.createElementNS("http://www.w3.org/1999/xhtml","div");y.innerHTML=A.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")}else{y=A}var z=y.textContent;var v=B?c(B,z,true):e(z);var x=u(y);if(x.length){var w=document.createElementNS("http://www.w3.org/1999/xhtml","div");w.innerHTML=v.value;v.value=q(x,u(w),z)}v.value=g(v.value);A.innerHTML=v.value;A.className+=" hljs "+(!B&&v.language||"");A.result={language:v.language,re:v.r};if(v.second_best){A.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function d(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function k(){return Object.keys(f)}function i(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=e;this.fixMarkup=g;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=d;this.listLanguages=k;this.getLanguage=i;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/};this.CLCM={cN:"comment",b:"//",e:"$",c:[this.PWM]};this.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[this.PWM]};this.HCM={cN:"comment",b:"#",e:"$",c:[this.PWM]};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.CSSNM={cN:"number",b:this.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0};this.RM={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("javascript",function(a){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",b:/^\s*('|")use strict('|")/,r:10},a.ASM,a.QSM,a.CLCM,a.CBCM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBCM,a.RM,{b:/</,e:/>;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:true,c:[a.inherit(a.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[a.CLCM,a.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+a.IR,r:0}]}});hljs.registerLanguage("css",function(a){var b="[a-zA-Z-][a-zA-Z0-9_-]*";var c={cN:"function",b:b+"\\(",rB:true,eE:true,e:"\\("};return{cI:true,i:"[=/|']",c:[a.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:true,eE:true,r:0,c:[c,a.ASM,a.QSM,a.CSSNM]}]},{cN:"tag",b:b,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[a.CBCM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[c,a.CSSNM,a.QSM,a.ASM,a.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/</,r:0,c:[d,{cN:"attribute",b:c,r:0},{b:"=",r:0,c:[{cN:"value",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:true,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},d,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},b]}]}});hljs.registerLanguage("json",function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}});

    hljs.initHighlightingOnLoad();

    // build nav
    (function(){
        var topics = document.querySelectorAll('h2'),
            docnav = document.getElementById('docs-nav'),
            nav    = [];

        nav.push('<ul class="uk-nav uk-nav-side sticky">');

        [].forEach.call(topics, function(topic) {
            nav.push('<li><a href="#'+topic.id+'">'+topic.innerHTML+'</a></li>');
        });

        nav.push('</ul>&nbsp;');

        docnav.innerHTML = nav.join("\n");

        nav = docnav.children[0];

        document.addEventListener("scroll",function(){

            if (window.scrollY > 200) {
                nav.style.position = 'fixed';
                nav.style.top = '0px';
            } else {
                nav.style.position = '';
                nav.style.top = '';
            }

        }, false);
    })()
</script>

<style>

  /*
  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
  */

  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #333;
    background: #f8f8f8;
    -webkit-text-size-adjust: none;
  }

  .hljs-comment,
  .hljs-template_comment,
  .diff .hljs-header,
  .hljs-javadoc {
    color: #998;
    font-style: italic;
  }

  .hljs-keyword,
  .css .rule .hljs-keyword,
  .hljs-winutils,
  .javascript .hljs-title,
  .nginx .hljs-title,
  .hljs-subst,
  .hljs-request,
  .hljs-status {
    color: #333;
    font-weight: bold;
  }

  .hljs-number,
  .hljs-hexcolor,
  .ruby .hljs-constant {
    color: #008080;
  }

  .hljs-string,
  .hljs-tag .hljs-value,
  .hljs-phpdoc,
  .hljs-dartdoc,
  .tex .hljs-formula {
    color: #d14;
  }

  .hljs-title,
  .hljs-id,
  .scss .hljs-preprocessor {
    color: #900;
    font-weight: bold;
  }

  .javascript .hljs-title,
  .hljs-list .hljs-keyword,
  .hljs-subst {
    font-weight: normal;
  }

  .hljs-class .hljs-title,
  .hljs-type,
  .vhdl .hljs-literal,
  .tex .hljs-command {
    color: #458;
    font-weight: bold;
  }

  .hljs-tag,
  .hljs-tag .hljs-title,
  .hljs-rules .hljs-property,
  .django .hljs-tag .hljs-keyword {
    color: #000080;
    font-weight: normal;
  }

  .hljs-attribute,
  .hljs-variable,
  .lisp .hljs-body {
    color: #008080;
  }

  .hljs-regexp {
    color: #009926;
  }

  .hljs-symbol,
  .ruby .hljs-symbol .hljs-string,
  .lisp .hljs-keyword,
  .clojure .hljs-keyword,
  .scheme .hljs-keyword,
  .tex .hljs-special,
  .hljs-prompt {
    color: #990073;
  }

  .hljs-built_in {
    color: #0086b3;
  }

  .hljs-preprocessor,
  .hljs-pragma,
  .hljs-pi,
  .hljs-doctype,
  .hljs-shebang,
  .hljs-cdata {
    color: #999;
    font-weight: bold;
  }

  .hljs-deletion {
    background: #fdd;
  }

  .hljs-addition {
    background: #dfd;
  }

  .diff .hljs-change {
    background: #0086b3;
  }

  .hljs-chunk {
    color: #aaa;
  }

</style>
</body>
</html>
